<template>
<div>
  <!-- 头部 -->
  <div class="behind-header">
    <a href="" class="logo"><img src="@/assets/images/logo-cangm.png" alt=""></a>
    <ul v-if="isLogged">
      <li>
        <router-link to="/login" class="login"><i class="iconfont icon-news-people"></i>欢迎您，{{user.Name}}[{{user.RoleName}}]</router-link>
      </li>
      <li @click="logOff"><i class="iconfont icon-logout"></i>退出</li>
    </ul>
    <ul v-else>
      <li>
        <router-link to="/login" class="login"><i class="iconfont icon-news-people"></i>登录</router-link>
      </li>
    </ul>
  </div>
  <!-- 头部 end -->
  <div class="behind-wrapper">
    <!-- 左侧菜单 -->
    <div class="left-nav">
      <ul>
        <li class="" v-for="(item, index) in leftMenu" @click="routerLink(index, item.path)" :key="index">
          <a><i class="iconfont" :class="item.class"></i>{{ item.title }}</a>
        </li>
      </ul>
    </div>
    <!-- 左侧菜单 end -->
    <router-view></router-view>
  </div>
</div>
</template>

<script>
export default {
  data() {
    return {
      Logistic: {
        name: "Logistic",
        value: {
          Area: null,
          City: null
        }
      },
      leftMenu: [
        {
          class: "icon-cm-home",
          title: "首页",
          path: "/behind/index"
        },
        {
          class: "icon-cm-news",
          title: "资讯中心",
          path: "/behind/newsEditList"
        }
      ],
      navIndex: 0
    }
  },
  computed: {
    isVip() {
      return this.$store.getters.isVip;
    },
    isAdmin() {
      return this.$store.getters.isAdmin;
    },
    isLogged() {
      return this.$store.getters.isLogged;
    },
    user() {
      return this.$store.state.user;
    },
    picClass() {
      return {
        backgroundImage: this.loginUser.pictContent ?
          "url(" + this.loginUser.pictContent + ")" : 'url("")'
      };
    }
  },
  methods: {
    routerLink(index, path) {
      // 点击哪个路由就赋值给自定义的下下标
      this.navIndex = index;
      // 路由跳转
      this.$router.push(path);
    },
    checkRouterLocal(path) {
      // 查找当前路由下标高亮
      this.navIndex = this.leftMenu.findIndex(item => item.path === path);
    },
    itemSelect(name) {
      this.$router.push(name);
    },
    logOff() {
      this.$Modal.confirm({
        title: "提示",
        content: "是否退出登录？",
        onOk: () => {
          this.axios.post("/api/user/logoff").then(rs => {
            this.$Notice.info({
              title: "提示",
              desc: "退出登录！"
            });

            this.$store.commit('logOff');

            this.loginUser = null;
            this.$router.push("/");
          });
        }
      });
    }
  },
  watch: {
    $route: function() {
      let path = this.$route.path;
      // 检索当前路径
      this.checkRouterLocal(path);
    }
  }
}
</script>